<template>
  <div :class="className" :style="{height:height,width:width, 'font-size': Math.round(5400/100) + 'px'}"/>
</template>

<script>

import * as echarts from 'echarts'
import drawMixin from "@/utils/drawMixin";
// import {listCreditTypeStatistics} from "@/api/company";

const animationTime = 10000;
export default {
  name: "RadarChart",
  mixins: [drawMixin],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null,
      chartTimer: null,
      creditData: [[20, 30, 40, 50, 60]],
      bondData: [[30, 40, 50, 60, 70]]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    this.getChartData()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions()
    },

    getChartData() {
      this.chartTimer = setInterval(() => {
        // listCreditTypeStatistics().then(res => {
        //   const data = res.data;
        //   this.creditData = [[data[0].creditCnt, data[1].creditCnt, data[2].creditCnt, data[3].creditCnt, data[4].creditCnt]]
        //   this.bondData = [[data[0].bondCnt, data[1].bondCnt, data[2].bondCnt, data[3].bondCnt, data[4].bondCnt]]
        //   this.setOptions()
        // })
      }, 10 * 1000)

    },
    setOptions({dataValue} = {}) {
      this.chart.setOption({
        animationDuration: animationTime,
        normal: {
          top: 200,
          left: 300,
          width: 500,
          height: 400,
          zIndex: 6,
          backgroundColor: "rgb(245,3,95)"
        },
        color: ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
        tooltip: {
          show: true,
          trigger: "item"
        },
        legend: {
          show: true,
          icon: "circle",
          left: "center",
          top: "90%",
          orient: "horizontal",
          data: ["授信总笔数", "发债总笔数"]
        },
        radar: {
          center: ["50%", "50%"],
          radius: "65%",
          startAngle: 90,
          splitNumber: 4,
          shape: "circle",
          splitArea: {
            areaStyle: {
              color: ["transparent"]
            }
          },
          axisLabel: {
            show: false,
            fontSize: 18,
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#293C55"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "gray"
            }
          },
          indicator: [
            {"name": "绿色金融"},
            {"name": "科创金融"},
            {"name": "普惠金融"},
            {"name": "涉农金融"},
            {"name": "专精特效"}
          ]
        },
        series: [
          {
            name: "授信总笔数",
            type: "radar",
            symbol: "circle",
            symbolSize: 10,
            areaStyle: {
              normal: {
                color: "rgba(245, 166, 35, 0.4)"
              }
            },
            itemStyle: {
              color: 'rgba(245, 166, 35, 1)',
              borderColor: 'rgba(245, 166, 35, 0.3)',
              borderWidth: 10,
            },
            lineStyle: {
              normal: {
                type: "dashed",
                color: "rgba(245, 166, 35, 1)",
                width: 2
              }
            },
            data: this.creditData
          },
          {
            name: "发债总笔数",
            type: "radar",
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: 'rgba(19, 173, 255, 1)',
                borderColor: "rgba(19, 173, 255, 0.4)",
                borderWidth: 10
              }
            },
            areaStyle: {
              normal: {
                color: "rgba(19, 173, 255, 0.5)"
              }
            },
            lineStyle: {
              normal: {
                color: "rgba(19, 173, 255, 1)",
                width: 2,
                type: "dashed"
              }
            },
            data: this.bondData
          }]
      })
    }
  }
}
</script>
